<template>
  <Dialog :title="dialogTitle" :draggable="true" v-model="dialogVisible">
    <div @click="bindLib" class="genLib flex justify-center gap-34 items-center py-40">
      <section>选择已有图库</section>
      <section>新建图库</section>
    </div>
    <picSelectForm ref="picSelectFormRef" width="60%" />
    <imgLibForm class="" ref="imgLibFormRef" width="61%" />
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import imgLibForm from '../a-gallery/imgLibForm.vue'
import picSelectForm from '../a-gallery/picSelectForm.vue'
const dialogVisible = ref(false)
const dialogTitle = ref('')

const imgLibFormRef = ref()
const picSelectFormRef = ref()
const open = (title: string) => {
  dialogTitle.value = title
  dialogVisible.value = true
}
defineExpose({ open })
const bindLib = (e) => {
  const target = e.target
  if (target.innerText === '选择已有图库') {
    picSelectFormRef.value.open()
  } else {
    imgLibFormRef.value.open()
  }
  // console.log('bindLib', e)
}
</script>

<style lang="scss" scoped>
.genLib {
  section {
    width: 236px;
    height: 126px;
    line-height: 39px;
    border-radius: 4px;
    background-color: rgba(64, 149, 229, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 28px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFangSC-regular;
  }
}
</style>
